<style lang="less" scoped rel="stylesheet/less" type="text/less" >
 @import '~src/assets/css/common.less';
	.product {
	position: absolute;
	left: 0*@rem-per-px;
	top: 0*@rem-per-px;
	width: 748*@rem-per-px;
	height: 659*@rem-per-px;
	z-index: 16;
	}
	// .e-1 {
	// background-color: rgba(238, 238, 238, 0.6);
	// position: absolute;
	// left: 381*@rem-per-px;
	// top: 526*@rem-per-px;
	// width: 231*@rem-per-px;
	// height: 24*@rem-per-px;
	// z-index: 15;
	// }
	.d-1 {
	background-color: rgba(238, 238, 238, 0.6);
	position: absolute;
	left: 381*@rem-per-px;
	top: 486*@rem-per-px;
	width: 139*@rem-per-px;
	height: 26*@rem-per-px;
	z-index: 14;
	}
	.c-1 {
	background-color: rgba(238, 238, 238, 0.6);
	position: absolute;
	left: 381*@rem-per-px;
	top: 431*@rem-per-px;
	width: 305*@rem-per-px;
	height: 27*@rem-per-px;
	z-index: 13;
	}
	.b-1 {
	background-color: rgba(238, 238, 238, 0.6);
	position: absolute;
	left: 374*@rem-per-px;
	top: 87*@rem-per-px;
	width: 327*@rem-per-px;
	height: 327*@rem-per-px;
	z-index: 12;
	}
	// .a-1 {
	// background-color: rgba(238, 238, 238, 0.6);
	// position: absolute;
	// left: 374*@rem-per-px;
	// top: 87*@rem-per-px;
	// width: 327*@rem-per-px;
	// height: 481*@rem-per-px;
	// z-index: 11;
	// }
	// .e-0 {
	// background-color: rgba(238, 238, 238, 0.6);
	// position: absolute;
	// left: 46*@rem-per-px;
	// top: 526*@rem-per-px;
	// width: 231*@rem-per-px;
	// height: 24*@rem-per-px;
	// z-index: 10;
	// }
	.d-0 {
	background-color: rgba(238, 238, 238, 0.6);
	position: absolute;
	left: 46*@rem-per-px;
	top: 486*@rem-per-px;
	width: 139*@rem-per-px;
	height: 26*@rem-per-px;
	z-index: 9;
	}
	.c-0 {
	background-color: rgba(238, 238, 238, 0.6);
	position: absolute;
	left: 46*@rem-per-px;
	top: 431*@rem-per-px;
	width: 305*@rem-per-px;
	height: 27*@rem-per-px;
	z-index: 8;
	}
	.b-0 {
	background-color: rgba(238, 238, 238, 0.6);
	position: absolute;
	left: 39*@rem-per-px;
	top: 87*@rem-per-px;
	width: 327*@rem-per-px;
	height: 327*@rem-per-px;
	z-index: 7;
	}
	.a-0 {
	background-color: rgb(255, 255, 255);
	position: absolute;
	left: 39*@rem-per-px;
	top: 87*@rem-per-px;
	width: 327*@rem-per-px;
	height: 481*@rem-per-px;
	z-index: 6;
	}
	.arrow {
	background-color: rgba(238, 238, 238, 0.6);
	position: absolute;
	left: 686*@rem-per-px;
	top: 31*@rem-per-px;
	width: 15*@rem-per-px;
	height: 27*@rem-per-px;
	z-index: 5;
	}
	.title {
        background-color: rgba(238, 238, 238, 0.6);
        position: absolute;
        left: 38*@rem-per-px;
        top: 31*@rem-per-px;
        width: 116*@rem-per-px;
        height: 27*@rem-per-px;
        z-index: 4;
	}
	.product {
        background-color: rgb(255, 255, 255);
        position: relative;
        height: 595*@rem-per-px;
        z-index: 3;
	}
</style>


<template>
	<div>
		<div class="product">
			<div class="title"/>
			<div class="arrow"/>
			<!-- <span class="a-0"/> -->
			<span class="b-0"/>
			<span class="c-0"/>
			<span class="d-0"/>
			<!-- <span class="e-0"/> -->
			<!-- <span class="a-1"/> -->
			<span class="b-1"/>
			<span class="c-1"/>
			<span class="d-1"/>
			<!-- <span class="e-1"/> -->
		</div>
	</div>

</template>

<script>

export default {
	name: 'Product',
	data() {
		return {};
	},
	methods: {},
};
</script>
